// 增加一个库：①package.json中添加 dependencies如："windicss": "^3.5.6"
// ②执行命令：npm i ；③ 工具-构建npm

const { defineConfig } = require('windicss/helpers');
const plugin = require('windicss/plugin');
function hexToRgba(hex) {
  if (![3, 4, 6, 8].includes(hex.length)) return console.warn('------ Invalid hex color: ' + hex);
  let opacity = undefined;;
  if (hex.length == 8) opacity = hex.slice(6) && (hex = slice(0, 6));
  if (hex.length == 4) opacity = hex.slice(3) + hex.slice(3) && (hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2]);
  const r = parseInt(hex.slice(0, 2), 16);
  const g = parseInt(hex.slice(2, 4), 16);
  const b = parseInt(hex.slice(4, 6), 16);
  const a = opacity ? parseInt(opacity, 16) / 255 : undefined;
  return { r, g, b, a };
}
module.exports = defineConfig({
  attributify: {
    prefix: 'hover',
  },
  safelist: [],
  alias: {
  },
  theme: {
    extend: {
      size: 'var(--size)'
    },
  },
  shortcuts: {},
  corePlugins: {
  },
  extract: {
    exclude: ['node_modules/**', 'miniprogram_npm/**']
  },
  plugins: [
    require('windicss/plugin/aspect-ratio'),
    require('windicss/plugin/scroll-snap'),
    plugin(({ addDynamic, variants }) => {
      addDynamic('size', ({ Utility, Style }) => {
        var prop = Utility.handler
          .handleStatic(Style('size'))
          .handleNumber(1, undefined, 'int');
        if (!prop) return;
        if (prop._amount == 'full') prop._amount = '100%';
        return Style.generate(Utility.class, {
          "--tw-size": prop._amount,
          width: 'var(--tw-size)',
          height: 'var(--tw-size)'
        })
      });
      addDynamic('color', ({ Utility, Style }) => {
        var prop = Utility.handler;
        if (!prop || !/^[0-9a-fA-F]{3,8}$/g.test(prop._amount)) return;
        let { r, g, b, a } = hexToRgba(prop._amount);
        a = a === undefined ? 1 : a;
        return Style.generate(Utility.class, {
          "--tw-color": `rgba(${r},${g},${b},${a})`,
          color: 'var(--tw-color)'
        })
      });
      addDynamic('mbg', ({ Utility, Style }) => {
        var prop = Utility.handler;
        if (!prop || !/^[0-9a-fA-F]{3,8}$/g.test(prop._amount)) return;
        let { r, g, b, a } = hexToRgba(prop._amount);
        a = a === undefined ? 1 : a;
        return Style.generate(Utility.class, {
          "--tw-bg": `${r},${g},${b}`,
          backgroundColor: 'rgba(var(--tw-bg),var(--tw-bg-opacity, 1))'
        })
      });
      addDynamic('m-p', ({ Utility, Style }) => {
        var prop = Utility.handler;
        if (!prop) return;
        const sign = prop.utility.raw.slice(0, 1) == '-' ? '-' : '';
        return Style.generate(Utility.class, {
          margin: sign + prop._amount + '%',
        })
      });
      addDynamic('mx-p', ({ Utility, Style }) => {
        var prop = Utility.handler;
        if (!prop) return;
        const sign = prop.utility.raw.slice(0, 1) == '-' ? '-' : '';
        return Style.generate(Utility.class, {
          marginLeft: sign + prop._amount + '%',
          marginRight: sign + prop._amount + '%',
        })
      });
      addDynamic('my-p', ({ Utility, Style }) => {
        var prop = Utility.handler;
        if (!prop) return;
        const sign = prop.utility.raw.slice(0, 1) == '-' ? '-' : '';
        return Style.generate(Utility.class, {
          marginTop: sign + prop._amount + '%',
          marginBottom: sign + prop._amount + '%',
        })
      });
      addDynamic('mr-p', ({ Utility, Style }) => {
        var prop = Utility.handler;
        if (!prop) return;
        const sign = prop.utility.raw.slice(0, 1) == '-' ? '-' : '';
        return Style.generate(Utility.class, {
          marginRight: sign + prop._amount + '%',
        })
      });
      addDynamic('ml-p', ({ Utility, Style }) => {
        var prop = Utility.handler;
        if (!prop) return;
        const sign = prop.utility.raw.slice(0, 1) == '-' ? '-' : '';
        return Style.generate(Utility.class, {
          marginLeft: sign + prop._amount + '%',
        })
      });
      addDynamic('left-p', ({ Utility, Style }) => {
        var prop = Utility.handler;
        if (!prop) return;
        const sign = prop.utility.raw.slice(0, 1) == '-' ? '-' : '';
        return Style.generate(Utility.class, {
          left: sign + prop._amount + '%',
        })
      });
      addDynamic('w-p', ({ Utility, Style }) => {
        var prop = Utility.handler;
        if (!prop) return;
        const sign = prop.utility.raw.slice(0, 1) == '-' ? '-' : '';
        return Style.generate(Utility.class, {
          width: sign + prop._amount + '%',
        })
      });
      addDynamic('aspect-', ({ Utility, Style }) => {
        var prop = Utility.handler;
        if (!prop) return;
        const match = prop.utility.raw.match(/aspect-(\d+)-(\d+)/);
        if (!match) return;
        return Style.generate(Utility.class, {
          aspectRatio: `${match[1]}/${match[2]}`,
        })
      });
    })
  ],
})